import React from 'react';
import { View, Text } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import Star from '../../../../components/star';
import { age, genderIconProps } from '../../../../utils';
import styles from './style';
import Tags from './tags';

export default ({ data, tags }) => {
  const { name, gender, birthday } = data;
  const iconProps = genderIconProps(gender)
  return (
    <View style={styles.card}>
      <View
        style={[
          styles.avatar,
          { backgroundColor: iconProps.color }
        ]}
      >
        <Icon name={iconProps.name} size={32} color="#fff" />
      </View>
      <View style={styles.cardContent}>
        <Text style={styles.baseInfo}>
          {name}{birthday ? ` ${age(birthday)}` : ''}
        </Text>
        {/* <Star style={styles.stars} data={stars} size={12} /> 
        <Tags data={tags} />*/}
      </View>
    </View>
  );
};
